<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M896 106.667H128A85.333 85.333 0 0 0 42.667 192v640A85.333 85.333 0 0 0 128 917.333h768A85.333 85.333 0 0 0 981.333 832V192A85.333 85.333 0 0 0 896 106.667z m-245.333 64v316.586l-128-47.786a31.787 31.787 0 0 0-22.4 0l-128 47.786V170.667z m-544 21.333A21.333 21.333 0 0 1 128 170.667h181.333v96H106.667z m810.666 640A21.333 21.333 0 0 1 896 853.333H128A21.333 21.333 0 0 1 106.667 832V330.667h202.666v202.666A32 32 0 0 0 352 563.2l160-59.733L671.36 563.2a32 32 0 0 0 42.667-29.867V330.667h203.306z m0-565.333H714.667v-96H896A21.333 21.333 0 0 1 917.333 192z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M640 714.667a32 32 0 0 0 0 64h170.667a32 32 0 0 0 0-64z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
